<template>
    <div class="flex">
    <div class="flex items-start">
      <input class="focus:ring-2 h-11 w-80 outline-0 focus:ring-blue-500 bg-slate-2 focus:outline-none appearance-none text-sm leading-6 text-slate-900 placeholder-slate-400 rounded-l-md py-2 pl-10 ring-slate-200 shadow-sm" type="text"  placeholder="Email address">
      <div class="bg-violet-6 h-11  text-slate-2 font-bold flex items-center justify-center rounded-r-md p-x-4">Sign up for GitHub</div>
    </div>
    <div class="bg-slate-6 w-1px m-x-6"></div>
    <div class="btn-mktg border-1 w-80 border-violet-6 border-solid rounded-md h-11 flex items-center justify-center text-lg text-slate-2 font-bold gap-1">
      <div>Start a free enterprise trial</div>
      <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
        <path class="octicon-chevrow-stem" stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
      </svg>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
  
</script>
  
<style>
  .btn-mktg {
    box-shadow: rgba(255, 255, 255, 0.25) 0 0 0 1px inset;
    transition: box-shadow .2s, outline .2s ease;
  }
  .btn-mktg:hover {
    cursor: pointer;
    box-shadow: white 0 0 0 2px inset;
  }
  .btn-mktg:hover .arrow-symbol-mktg {
    transform: translateX(4px);
    transition: transform .2s;
  }
  .octicon-chevrow-stem {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    transition: stroke-dashoffset .2s;
  }
  .btn-mktg:hover .octicon-chevrow-stem {
    stroke-dashoffset: 20;
  }
</style>